<template>
    <div class="pages">
      <van-icon name="gold-coin" color="red" size="50"/>
      <p style="margin:40rpx 0">可提现提成</p>
      <p class="money" style="margin-bottom: 40rpx;font-size: 60rpx">￥{{moneyData.validRestTotal}}</p>
      <div class="btn">
        <button  class="weui-btn weui-btn_primary" disabled @click="goDetail">七天后自动到账，如未到账请联系客服!</button>
      </div>
            <ul class="list">
              <li class="moneyDetail">
                <p style="margin-bottom: 18rpx;">总提成金额:&nbsp;{{moneyData.inTotal}}</p>
                <p style="margin-bottom: 18rpx;">已提现金额:&nbsp;{{moneyData.outTotal}}</p>
                <p style="margin-bottom: 18rpx;">剩&nbsp;&nbsp;余&nbsp;&nbsp;金&nbsp;&nbsp;额&nbsp;:{{moneyData.restTotal}}</p>
                <p style="margin-bottom: 18rpx;">预&nbsp;&nbsp;备&nbsp;&nbsp;金&nbsp;&nbsp;额&nbsp;:{{moneyData.preTotal}}</p>
              </li>

            </ul>
      <van-collapse :value="activeNames" @change="onChange" style="font-size: 30rpx;">
        <van-collapse-item title="我的吸粉" name="1" >
          <div class="weui-panel__bd">
            <a  class="weui-media-box weui-media-box_appmsg"  style="padding:30rpx 0;" v-for="(item,index) in lookList" @click="goCartIndex(item)">
              <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" :src="item.headimgurl" alt="">
              </div>
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title" style="text-align:left;display: flex;justify-content: space-between;align-items: center">

                  <div style="display: flex;justify-content: space-between;align-items: center;width: 100%">
                    <span style="display: inline-block;width: 80%;overflow:hidden;text-overflow: ellipsis;word-break:keep-all">{{item.nickName}}</span>
                    <van-icon name="vip-card" size="56rpx" color="red" v-if="item.isvip"/>
                  </div>

                </h4>
<!--                <h4 class="weui-media-box__title" style="color: #9b9b9b;font-size: 26rpx;margin-top:20rpx;">{{item.cardCompany}}</h4>-->
                <h4 v-if="item.isvip"  class="weui-media-box__title" style="color: #9b9b9b;text-align: left;font-size: 26rpx;margin-top:20rpx;">会员开始时间: <span>{{item.vipStartTime}}</span></h4>
<!--                <p>会员结束时间: <span>{{item.vipEndTime}}</span></p>-->

                <!--                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
              </div>
            </a>
            <div class="weui-loadmore" @click="gewhoSctMore" v-if="loadMore2">
              <span class="weui-loadmore__tips">加载更多</span>
            </div>

            <div class="weui-loadmore weui-loadmore_line" style="margin: 10px auto;" v-if="outData2">
              <span class="weui-loadmore__tips">已经到底了</span>
            </div>
          </div>

        </van-collapse-item>
      </van-collapse>
    </div>
</template>

<script>
    export default {
        name: "index",
        onLoad(options){
            this.money=options.money;
        },
        data(){
            return {
              lookList:[],
              activeNames:['1'],
              loadMore2:true,
              outData2:false,
               money:0,
              pageNum:1,
              pageSize:10,
              lookListTotal:0,
              result2:[],
                moneyData:{}
            }
        },
      onPullDownRefresh(){
      //  console.log('down')
        // if(this.result.length){
        this.pageNum=1;
        // }
        this.getList();
        this.getMoney()

      },
      onShow(){
        wx.setNavigationBarTitle({
          title: '我的提成'
        })
        this.getList();
          this.getMoney()
      },
        methods:{
          getList(){
            let userId =  wx.getStorageSync('userId')
            this.$http.request({
              method: 'POST',
              url: `/api/wxuser/myFans`,
              body: {
                "pageNum": this.pageNum,
                "pageSize": this.pageSize,
                userId:userId
              }
            }).then((data)=>{
              if(data.code==200){
                wx.stopPullDownRefresh()
                this.lookListTotal=data.data.totalCount;
                // this.lookList=data.data.list;
                this.result2=data.data.list;
                if(this.pageNum==1){
                  this.lookList=data.data.list;
                  if(this.result2.length<10){

                    this.loadMore2=false;
                    this.outData2=true;
                  }
                  else{

                    this.outData2=false;
                    this.loadMore2=true;
                  }
                }else{
                  this.lookList.push(...data.data.list);
                  if(this.result2.length<10){

                    this.loadMore2=false;
                    this.outData2=true;
                  } else{

                    this.outData2=false;
                    this.loadMore2=true;
                  }
                }
              //   console.log(this.lookList)
              }
            })
          },
          gewhoSctMore(){

          },
          getindexCard (cartId,userId) {
            return new Promise((resolve,reject) => {
              this.$http.request({
                method: 'get',
                url: `/api/card/detail`,
                body: {
                  cardId:cartId||'',
                  userId:userId||''
                }
              }).then((data) => {
                if (data.code == 200) {
                  resolve(data.data)
                } else {
                  reject()

                }
              })
            })
          },
          goCartIndex(item){
            this.getindexCard( "", item.id).then((data)=>{
              wx.reLaunch({url:`/pages/index/main?cartId=${item.cardId}&userId=${item.id}&img=${item.headimgurl}&isCartId=1`})
            }).catch(()=>{
              wx.showToast({
                title: '名片无效',
                icon: 'none',
                duration: 2000

              })
            })
          },
          onChange (e) {
            this.activeNames = e.mp.detail
          },
            getMoney(){
                let userId = wx.getStorageSync('userId')
                this.$http.request({
                    method: 'get',
                    url: `/api/incomeFlowing/incomeDetail/${userId}`,
                    body: {}
                }).then((data)=>{
                    if(data.code==200){
                      wx.stopPullDownRefresh()
                        this.moneyData=data.data;
                    }
                })
            },
            goDetail(){
                wx.navigateTo({ url: '/pages/vacancyDetail/main?money='+this.money })
            }
        }
    }
</script>

<style scoped>
   .pages{
     width: 100%;
     height: 100%;
     background-color: #fff;
     text-align: center;
     box-sizing: border-box;
     padding-top: 40rpx;
   }
   .list{
     width: 100%;
     height:280rpx;
     margin-top:20rpx;
   }
   .list>li{
     width: 100%;
     height: 80rpx;
     box-sizing: border-box;
     border-top:1px solid #eee;
     border-right:1px solid #eee;
     text-align: center;
   }
   .list>li.moneyDetail{
     height: 113rpx;
     box-sizing: border-box;

     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     border-top:none;
   }
   .list>li.moneyDetail>p{
     color: #aaa;
     width: 100%;
     text-align: left;
     box-sizing: border-box;
     padding-left: 30rpx;
   }

   .list>li:first-child{
     width: 100%;
   }
   .list>li>p:first-child{
     color: #aaa;
   }
   .list>li>p:last-child{
     color: #aaa;
   }
   .list>li:last-child{
     border-right: none;
   }
</style>
